<template>
    <div class="todo-item" :class="{'del':props.todoItem.status==-1}">
        <span class="check-box" v-if="props.todoItem.status==0" @click="emit('updateTodoItem',props.todoItem.id)"></span>
        <span class="check-box" v-if="props.todoItem.status==1"></span>
        <div class="title">{{props.todoItem.title}}</div>
        <div class="todo-btns">
        <span v-if="props.todoItem.status==0"><IconDelete @click="emit('delTodo',props.todoItem.id)" /></span> 
        </div>
    </div>
</template>
<script lang="ts" setup>
    import IconChecked from '@/components/icons/IconChecked.vue'
    import IconDelete from '@/components/icons/IconDelete.vue'
    const props  = defineProps(['todoItem'])
    console.log(props.todoItem) 

    interface dataEntity {
        title:string;
        status:number;
        id:number;
    }

    //const emit = defineEmits(['updateTodoItem'])
    const emit = defineEmits<{
        (e: 'updateTodoItem', id: number): void,
        (e: 'delTodo', id: number): void,
    }>()


</script>
<style lang="less">
    .todo-item{
        display: flex;
        padding:10px 0;
        align-items: center;
        &.del{
            color:#999;
            text-decoration: line-through;
            padding-left: 32px;
        }
        .title{
            flex:1;
            margin-right: 30px;
            padding:5px 0;
            border-bottom:1px solid #ddd;
        }
        .todo-btns{
            button{
                margin-left: 10px;
            }
        }
        .check-box{
            display: inline-block;
            width:16px;
            height: 16px;
            margin-right: 10px;
            background:#fff;
            border:1px solid #fff;
            box-shadow: -4px 4px 4px inset rgba(0, 0, 0, 0.1),4px -4px 8px inset rgba(255, 255, 255, 0.3);
            border-radius: 4px;
        }
    }
</style>